<!-- 活动卡片 -->
<template>
  <div
    class="activity-card"
    :class="{ 'has-tool': showButton && data?.status == 'underway' }"
    :style="{ width: cardWidth, height: cardHeight }"
    @click.stop="onClickCard(data)"
  >
    <div class="card-main">
      <slot name="header">
        <header>
          <h2 :title="data?.title">{{ data?.title }}</h2>
        </header>
      </slot>
      <slot name="tag">
        <ul v-if="data?.label" class="tag-wrap">
          <!-- <li v-for="(item, index) in data?.label" :key="index" class="tag" :title="item">{{ item }}</li> -->
          <template v-for="(item, index) in data?.label" :key="index">
            <div v-if="index < showLabelNumber" class="tag label-text" :title="item">{{ item }}</div>
            <a-popover v-else-if="index === showLabelNumber" placement="top">
              <template #content>
                <div class="tag-wrap max-w-688" style="margin-top: 0; flex-wrap: wrap">
                  <div v-for="(t, n) in data?.label?.slice(showLabelNumber, data?.label.length)" :key="n">
                    <div class="tag" :title="t">{{ t }}</div>
                  </div>
                </div>
              </template>
              <div class="base-label--more">...</div>
            </a-popover>
          </template>
        </ul>
      </slot>
      <slot name="describe">
        <div class="describe" :title="data?.describe">
          {{ data?.describe }}
        </div>
      </slot>
    </div>
    <slot name="footer">
      <ul class="footer">
        <div class="double-h">
          <div class="info">
            <li class="footer-item">
              <p>活动时间</p>
              <div class="item-text w-240">{{ data?.date }}</div>
            </li>
            <li class="footer-item">
              <p>参与人数</p>
              <div class="item-text w-100">{{ data?.userNum }}</div>
            </li>
            <slot name="status">
              <div v-if="data?.status" class="status-wrap" :class="[data?.status !== 'underway' && 'disabled']">{{ data?.statusText }}</div>
            </slot>
          </div>
          <div class="tool fc" :class="[data?.isJoin ? 'fff' : 'primary']" @click.stop="onClickParticipation(data)">
            <i class="iconfont icon-file-edit-line mr-6"></i>
            {{ data?.isJoin ? '再次参与' : '立即参与' }}
          </div>
        </div>
      </ul>
    </slot>

    <img v-if="data?.isJoin" class="join-img" src="@/assets/img/hit-contest/join.png" />
  </div>
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue'

  export interface ActivityCardData {
    id?: string | number
    //卡片名称
    title?: string
    //卡片描述
    describe?: string
    // 卡片状态
    status?: 'not_start' | 'underway' | 'end'
    statusText?: string
    // 日期
    date?: string
    // 卡片标签
    label?: string[]
    // 用户
    userNum?: number
    // 是否参与
    isJoin?: boolean
  }
  export interface DataSetCardProps {
    // 卡片数据
    data: ActivityCardData
    // 卡片宽度
    cardWidth?: string
    // 卡片高度
    cardHeight?: string
  }

  const props = withDefaults(defineProps<DataSetCardProps>(), {
    cardWidth: '100%',
    cardHeight: '100%'
  })

  const emits = defineEmits<{
    (e: 'onClickCard', data: ActivityCardData): void
    (e: 'onClickParticipation', data: ActivityCardData): void
  }>()

  const showLabelNumber = ref<number>(3)

  const showButton = computed(() => {
    return props.data.status === 'underway' || props.data.isJoin
  })

  /* 点击卡片 */
  const onClickCard = (data: ActivityCardData) => {
    emits('onClickCard', data)
  }
  /* 立即参与 */
  const onClickParticipation = (data: ActivityCardData) => {
    emits('onClickParticipation', data)
  }
</script>

<style lang="less" scoped>
  .activity-card {
    position: relative;
    display: flex;
    overflow: hidden;
    width: 590px;
    height: 230px;
    background: #fff;
    border: 1px solid #e8e9eb;
    border-radius: 10px;
    flex-direction: column;
    cursor: pointer;

    .status-wrap {
      position: absolute;
      top: 14px;
      right: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 60px;
      height: 26px;
      font-size: 12px;
      color: #fff;
      background: url('@/assets/img/bgc-corner-mark.png') no-repeat;
      background-size: contain;
      font-weight: 500;

      &.disabled {
        font-size: 12px;
        color: rgba(17, 22, 31, 0.29);
        font-weight: 500;
        background: url('@/assets/img/bgc-corner-mark-disabled.png') no-repeat;
      }
    }

    .card-main {
      padding: 50px 32px 30px;
      height: 180px;
      background: url('@/assets/img/hit-contest/dabang-card-bg.jpg') no-repeat;
      background-size: cover;

      > header {
        width: calc(100% - 34px);

        > h2 {
          overflow: hidden;
          font-size: 30px;
          font-family: 'Noto Sans SC';
          text-overflow: ellipsis;
          white-space: nowrap;
          color: #002259;
          font-style: normal;
          font-weight: 700;
          line-height: normal;
          .elliptical-1();
        }
      }

      .describe {
        margin-top: 12px;
        width: 100%;
        height: 40px;
        font-size: 12px;
        color: rgba(25, 25, 48, 0.75);
        font-weight: 400;
        line-height: 20px;
        .elliptical-1();
      }

      > .line {
        margin: 12px 0;
        width: 100%;
        height: 0.5px;
        background-color: #e8e8eb;
      }
    }

    .footer {
      overflow: hidden;
      height: 50px;
      border-top: 0.5px solid @border1;

      .double-h {
        height: 100px;
        transform: translateY(0);
        transition: transform 0.3s;

        .info {
          position: relative;
          display: flex;
          align-items: center;
          padding: 12px 30px;
          width: 100%;
          font-size: 12px;
          color: rgba(17, 22, 31, 0.52);
          font-weight: 400;
          line-height: 20px;

          .footer-item {
            display: flex;
            align-items: center;
            gap: 0 6px;

            > .item-text {
              height: 28px;
              font-size: 14px;
              color: rgba(21, 23, 27, 0.95);
              line-height: 28px;
              font-weight: 400;
            }
          }
        }

        .tool {
          height: 50px;

          &.fff {
            color: @text01;
            background: #fff;
          }

          &.primary {
            color: #fff;
            background: @primary1;
          }
        }
      }
    }

    .join-img {
      position: absolute;
      top: 88px;
      right: 7px;
      width: 74px;
      height: 74px;
      opacity: 0.8;
      transform: rotate(-30deg);
    }

    &.has-tool:hover {
      .footer {
        .double-h {
          transform: translateY(-50%);
        }
      }
    }
  }

  .tag-wrap {
    display: flex;
    gap: 6px 6px;
    margin-top: 12px;
  }

  .tag {
    padding: 3px 6px;
    font-size: 12px;
    color: #8599bf;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    font-weight: 400;
    line-height: 20px;
    .elliptical-1();
  }

  .base-label--more {
    padding: 3px 6px;
    font-size: 12px;
    color: rgba(17, 22, 31, 0.52);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    font-weight: 400;
    line-height: 20px; /* 166.667% */
    .fc();
  }
</style>
